<!--
 * @Description: 积分专区
 * @Author: Kerwin
 * @Date: 2024-11-18 11:45:38
 * @LastEditTime: 2025-05-17 17:21:34
 * @LastEditors:  Please set LastEditors
-->
<template>
  <view class="container">
    <view class="banner">
      <image src="https://image.blacksilverscore.com/uploads/3c79914b-14c6-4658-8c40-9a5314b06e80.png" mode="scaleToFill"
        style="width: 100%; height: 360rpx; vertical-align: middle"></image>
    </view>
    <view class="title"> <text>积分</text> 专区</view>
    <view class="content">
      <u-waterfall v-model="flowList" ref="uWaterfallRef">
        <template v-slot:left="{ leftList }">
          <view class="con-warter left" v-for="(item, index) in leftList" :key="index" @click="toProductDetail(item)">
            <!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
            <u-lazy-load threshold="-450" border-radius="0" :image="getImgFullPath(item.product.image)"
              :index="index"></u-lazy-load>
            <view class="con">
              <view class="con-title">
                {{ item.product.name }}
              </view>
              <view class="price">
                {{ item.money }} 元
              </view>
              <view class="score-tip" v-if="item?.scoreMoney">最高可使用{{
                item?.scoreMoney }}积分，抵扣{{ item?.scoreMoney }}元 </view>
              <view class="shopname">{{ item.shop.name }}</view>
            </view>
          </view>
        </template>
        <template v-slot:right="{ rightList }">
          <view class="con-warter" v-for="(item, index) in rightList" :key="index" @click="toProductDetail(item)">
            <u-lazy-load threshold="-450" border-radius="0" :image="getImgFullPath(item.product.image)"
              :index="index"></u-lazy-load>
            <view class="con">
              <view class="con-title">
                {{ item.product.name }}
              </view>
              <view class="price">
                {{ item.money }} 元
              </view>
              <view class="score-tip" v-if="item?.scoreMoney">最高可使用{{
                item?.scoreMoney }}积分，抵扣{{ item?.scoreMoney }}元 </view>
              <view class="shopname">{{ item.shop.name }}</view>
            </view>
          </view>
        </template>
      </u-waterfall>
      <u-loadmore style="margin-top: 30rpx;" color="#ccc" :status="loadStatus"></u-loadmore>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onLoad, onReachBottom, onShow } from '@dcloudio/uni-app'
import { baseApi, moneyApi, powerBankApi, productApi } from '@/api'
import { getImgFullPath } from '@/utils'
import { useConfigStore } from '@/store'
import { ref } from 'vue';
import { route } from '@/utils/common';

const configStore = useConfigStore()

interface ProductInfo {
  id: number
  productId: number
  shopId: number
  name: string
  price: number
  image: string
  shopName: string
  productSkuId: number
}
const flowList = ref<ProductInfo[]>([])
const uWaterfallRef = ref()
const page = ref(1)
const loadStatus = ref('loading')
const getList = async () => {
  if (loadStatus.value === 'nomore') return
  if(loadStatus.value === 'pending') return
  loadStatus.value = 'pending'
  const { data } = await productApi.getShopProductSkulistOrdinary({
    pageIndex: page.value,
    pageSize: 20,
    scoreSupport: true,
    detail: true,
    sortJson: '[{"column":"createTime","direction":"DESC"}]',
    otherColumns:["shop"]
  })
  flowList.value.push(...data.records)
  if (data.current < data.pages) {
    page.value = data.current + 1
    loadStatus.value = 'loading'
  } else {
    loadStatus.value = 'nomore'
  }
}
function toProductDetail(item: ProductInfo) {
  let url = `/pages/productDetail/index`
  route({
    url: url,
    params: {
      shopId: item.shopId,
      productId: item.productId,
      isApp: isApp.value,
      productSkuId: item.productSkuId
    }
  })
}

const isApp = ref(false)
onLoad((option) => {

  if (option?.from && option.from.toLowerCase() === 'app') {
    isApp.value = true
  }
  if (isApp.value) {
    // #ifdef H5
    // @ts-ignore
    window.JSBridge.registerEvent('HYUserEvent', async () => {
      getList()
    })
    // #endif
  } else {
    getList()
  }
})

onReachBottom(() => {
  getList()
})
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: #AFACA5;

  .banner {
    box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 3;

    &::before {
      content: "";
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      height: 400rpx;
      background: linear-gradient(180deg,
          #CABEA8,
          #AFACA5,
          #AFACA5);
      z-index: 2;
    }

  }

  .title {
    position: relative;
    z-index: 3;
    font-size: 52rpx;
    text-align: center;
    margin-top: 30rpx;
    color: #fff;
    letter-spacing: 6rpx;

    text {
      color: #df2525
    }
  }

  .content {
    padding: 30rpx;
    position: relative;
    z-index: 5;

    .con-warter {
      background: #fff;
      margin-bottom: 26rpx;
      border-radius: 8rpx;
      overflow: hidden;

      &.left {
        margin-right: 26rpx;
      }

      .con {
        padding: 20rpx;

        .con-title {
          font-size: 26rpx;
        }

        .price {
          color: #df2525;
          font-weight: bold;
          margin-top: 10rpx;
        }

        .score-tip {
          font-size: 26rpx;
          color: #fa1a05;
          background: #fff;
          margin-top: 10rpx;
        }

        .shopname {
          font-size: 22rpx;
          color: #999;
          margin-top: 10rpx;

        }
      }
    }
  }
}
</style>
